<template>
  <div class="monitor-card">
    <div class="monitor-card-inner">
      <n-card content-style="padding: 0">
        <NImage class="cover" />
        <n-space> </n-space>
      </n-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { NSpace, NCard, NImage } from 'naive-ui'
</script>
<style scoped>
.monitor-card {
  /* width: 100%; */
  margin: 0;
  /* background-color: ; */
  /* width: 370px; */
  max-width: 400px;
  min-width: 300px;
  width: 100%;
}
.monitor-card .monitor-card-inner{
  /* width: 100%; */
  margin: 5px 5px;
  transition: 0.15s;
}
.monitor-card .monitor-card-inner:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 5px 3px;
}
.monitor-card .cover {
  width: 100%;
  /* min-height: ; */
  object-fit: cover;
  min-height: 20vw;
  border: none;
}
</style>
